<template>
  <div>
    <div class="banner flex-center">
      <div class="px-[15%] xl:px-0 w-[1200px]">
        <h1 class="banner-main-title text-[#fff]">走进联合智为</h1>
        <div class="card-title-bar mt-10"></div>
        <p class="text-[#fff] text-sm md:text-xl xl:w-[30vw] mt-10">
          国家高新技术企业，双软认证企业，
          致力成为住建信息化领域的先行者、引领者、推动者！
        </p>
      </div>
    </div>

    <div id="introduce" class="company-box bg-white">
      <div class="module-con">
        <div class="company-title-less uppercase">Company introduction</div>
        <div class="card-title-main mt-5">公司介绍</div>
        <div class="card-title-bar mt-7"></div>
        <div class="flex justify-between mt-[30px] flex-col lg:flex-row">
          <div class="flex-[57.5%] text-gray-800 lg:pr-10 mb-10">
            <p class="text-sm leading-7">
              湖南联合智为信息技术有限公司，是行业创新的集平台、软件、硬件于一体的智慧住建综合解决方案提供商。公司基于丰富的智能终端硬件设备，利用AIoT、大数据、物联网、云计算等行业领先技术，自主研发了智慧工地云监管平台、智慧工地小程序，为监管部门、建筑企业、工程项目提供覆盖全生命周期的一站式智慧工地监管解决方案，帮助政府及企业精细解决项目安全施工难点，提升工程建设管理效率，打造智慧住建“样板观摩”工程。实现劳务用工智能化、工程施工数据化、项目信息可视化、现场流程精细化，助力数字建造、智慧建造、安全建造、绿色建造。
            </p>
            <br/>
            <p class="text-sm leading-7">
              公司自成立以来，积极服务行业建设。主编的《湖南省建筑工程施工现场监管信息系统技术标准》(标准编号：DBJ43/T102-2019)于2019年11月1日起在湖南全省范围内实施，协助湖南省住房和城乡建设厅完成编制《智慧工地政府监管信息系统建设指南》。作为湖南省建筑工人实名制管理平台的技术支持单位，既为政府、企业规范劳务用工提供了数据支撑，又切实保障了农民工的合法权益。现已与全国多地住建部门展开了广泛合作，在湖南、陕西、江西、海南等地积极部署智慧工地云监管平台。拥抱建筑业数字化转型升级大变革，以创新科技为引领，致力于成为住建信息化领域的先行者、引领者、推动者，助力建筑业高质量发展。
            </p>
          </div>
          <div class="flex-auto">
            <div class="flex justify-start items-center">
              <img class="w-[65px] h-[65px]" src="../assets/images/about/about_01.png" />
              <div class="ml-5">
                <h3 class="text-[#222] text-xl">愿景</h3>
                <p class="text-[#555] text-base mt-1">
                  成为住建信息化监管领域的先行者、引领者和推动者
                </p>
              </div>
            </div>
            <div class="flex items-center mt-10 lg:ml-10">
              <img class="w-[65px] h-[65px]" src="../assets/images/about/about_01.png" />
              <div class="ml-5">
                <h3 class="text-gray-800 text-xl">使命</h3>
                <p class="text-[#555] text-base mt-1">让天下没有难管的工地</p>
              </div>
            </div>
            <div class="flex items-center mt-10 lg:ml-20">
              <img class="w-[65px] h-[65px]" src="../assets/images/about/about_01.png" />
              <div class="ml-5">
                <h3 class="text-gray-800 text-xl">价值观</h3>
                <p class="text-[#555] text-base mt-1">联结、合作、智知、为我</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div id="honorary" class="cert-box py-20 text-center bg-[#fbfbfb]">
      <card-title less-title="Honorary qualification" title="荣誉资质"></card-title>
      <!-- s 轮播区-->
      <cu-swiper swiper-id="cert-swiper" loop navigation class="mt-[69px] module-con">
        <cu-swiper-item>
          <div class="waterfall w-full h-full">
            <img v-for="(cert, ind) in certList" :key="ind" :class="ind < 8 ? 'w-1/4' : 'w-[12.5%]'" :src="cert" />
          </div>
        </cu-swiper-item>
        <cu-swiper-item>
          <div class="waterfall w-full">
            <img v-for="(cert, ind) in 12" :key="ind" class=" w-1/6 h-1/2" :src="require(`../assets/images/about/cert_${cert + 16}.jpg`)" />
          </div>
        </cu-swiper-item>
      </cu-swiper>
      <!-- e 轮播区-->
    </div>

    <div id="industry" class="contribute-box">
      <card-title less-title="Team style" title="行业贡献"></card-title>
      <div class="contribute-con module-con">
        <div class="contribute-cell flex items-center mt-10 mx-auto">
          参与多项行业标准编制，助力智慧工地行业标准化建设
        </div>
        <cu-swiper swiper-id="contribute-swiper" loop navigation class="mx-auto my-10">
          <cu-swiper-item>
            <div class="flex h-full w-full justify-around">
              <div class="w-[31.5%] border border-gray-100">
                <img class="w-full" src="../assets/images/about/contribute_01.png" />
                <p class="p1 md:p-5 text-xs md:text-lg text-[#222]">
                  湖南省建筑工人实名制管理平台技术支持单位，2019年完成平台部署建设
                </p>
              </div>
              <div class="w-[31.5%] border border-gray-100">
                <img class="w-full" src="../assets/images/about/contribute_02.png" />
                <p class="p1 md:p-5 text-xs md:text-lg text-[#222]">
                  主编《湖南省建筑工程施工现场监管信息系统技术标准》(标准编号：DBJ43/T102-2019)，于2019年11月1日起在
                </p>
              </div>
              <div class="w-[31.5%] border border-gray-100">
                <img class="w-full" src="../assets/images/about/contribute_03.png" />
                <p class="p1 md:p-5 text-xs md:text-lg text-[#222]">
                  协助湖南省住房和城乡建设厅完成编制《智慧工地政府监管信息系统建设指南》
                </p>
              </div>
            </div>
          </cu-swiper-item>
          <cu-swiper-item>
            <div class="flex h-full w-full space-x-5">
              <div class="w-[31.5%] border border-gray-100">
                <img class="w-full" src="../assets/images/about/contribute_04.png" />
                <p class="p1 md:p-5 text-xs md:text-lg text-[#222]">
                  协助湖南省住房和城乡建设厅完成编制《智慧工地政府监管信息系统建设指南》
                </p>
              </div>
              <div class="w-[31.5%] border border-gray-100">
                <img class="w-full" src="../assets/images/about/contribute_05.png" />
                <p class="p1 md:p-5 text-xs md:text-lg text-[#222]">
                  中国工程建设标准化协会《智慧工地管理标准》参编单位
                </p>
              </div>
            </div>
          </cu-swiper-item>
        </cu-swiper>
        <div class="contribute-cell flex items-center mx-auto">
          积极响应各地住建部门要求，助力落实湖南建筑工人劳务实名制
        </div>
        <div class="my-10 px-[15%] text-sm text-[#616666] leading-[26px]">
          2019—2021年期间，联合智为协助湖南省多地住建部门累计提供200余场保障农民工工资支付暨实名制管理宣贯培训、智慧工地平台操作培训，推动劳务实名制管理和智慧工地平台落地。
        </div>
        <cu-swiper swiper-id="meeting-swiper" :option="meetingOption" navigation pagination loop class="mx-auto mt-10 w-full h-[300px]">
          <cu-swiper-item>
            <div class="h-full w-full">
              <div class="flex justify-around">
                <img class="w-[31.5%]" src="../assets/images/about/meeting_1.png" />
                <img class="w-[31.5%]" src="../assets/images/about/meeting_2.png" />
                <img class="w-[31.5%]" src="../assets/images/about/meeting_3.png" />
              </div>
            </div>
          </cu-swiper-item>
          <cu-swiper-item v-for="(item, index) in 4" :key="index">
            <div class="h-full w-full">
              <div class="flex justify-around">
                <img class="w-[31.5%] max-h-[247px]" :src="
                    require(`../assets/images/about/meeting_${
                      3 * index + 4
                    }.jpg`)
                  " />
                <img class="w-[31.5%] max-h-[247px]" :src="
                    require(`../assets/images/about/meeting_${
                      3 * index + 5
                    }.jpg`)
                  " />
                <img class="w-[31.5%] max-h-[247px]" :src="
                    require(`../assets/images/about/meeting_${
                      3 * index + 6
                    }.jpg`)
                  " />
              </div>
            </div>
          </cu-swiper-item>
        </cu-swiper>
      </div>
    </div>

    <div id="team" class="team-box py-20 bg-[#fbfbfb]">
      <card-title less-title="industry contribution" title="团队风采"></card-title>
      <cu-swiper swiper-id="team-swiper" :option="meetingOption" loop pagination navigation class="mt-14 module-con h-full">
        <cu-swiper-item>
          <div class="text-[#1C72FF] text-[26px] text-center">
            联合智为2022年会
          </div>
          <div class="team-list w-full mt-10  flex flex-wrap justify-between">
            <img v-for="(item, index) in 6" :key="index" class="team-item w-[31.5%] mb-[30px] h-auto max-h-[247px]" :src="require(`../assets/images/about/team_0${item}.png`)" />
          </div>
        </cu-swiper-item>
        <cu-swiper-item>
          <div class="text-[#1C72FF] text-[26px] text-center">
            2021年裸心会/生日会
          </div>
          <div class="team-list w-full mt-10 flex flex-wrap justify-between">
            <img v-for="(item, index) in 6" :key="index" class="team-item w-[31.5%] mb-[30px] h-auto max-h-[247px]" :src="
                require(`../assets/images/about/team_${
                  item + 6 < 10 ? '0' + (item + 6) : item + 6
                }.jpg`)
              " />
          </div>
        </cu-swiper-item>
        <cu-swiper-item>
          <div class="text-[#1C72FF] text-[26px] text-center">
            联合智为4周年
          </div>
          <div class="team-list w-full mt-10 flex flex-wrap justify-between">
            <img v-for="(item, index) in 6" :key="index" class="team-item w-[31.5%] mb-[30px] h-auto max-h-[247px]" :src="require(`../assets/images/about/team_${item + 18}.jpg`)" />
          </div>
        </cu-swiper-item>
        <cu-swiper-item>
          <div class="text-[#1C72FF] text-[26px] text-center">
            黑麋峰团建活动
          </div>
          <div class="team-list w-full mt-10 flex flex-wrap justify-between">
            <img v-for="(item, index) in 6" :key="index" class="team-item w-[31.5%] mb-[30px] h-auto max-h-[247px] object-cover" :src="require(`../assets/images/about/team_${item + 12}.jpg`)" />
          </div>
        </cu-swiper-item>
        <cu-swiper-item>
          <div class="text-[#1C72FF] text-[26px] text-center">
            千龙湖扩展活动
          </div>
          <div class="team-list w-full mt-10 flex flex-wrap justify-between">
            <img v-for="(item, index) in 6" :key="index" class="team-item w-[31.5%] mb-[30px] h-auto max-h-[247px] object-cover" :src="require(`../assets/images/about/team_${item + 24}.jpg`)" />
          </div>
        </cu-swiper-item>
      </cu-swiper>
    </div>

    <div id="social" class="public-box py-18 bg-[#eef0f3]">
      <card-title less-title="Social welfare" title="社会公益" :less-style="{
          background: 'linear-gradient(360deg, #FBFBFB 0%, #EFEFEF 100%)',
        }"></card-title>
      <div class="module-con flex flex-wrap flex-col md:flex-row mt-[60px]">
        <div class="w-full md:w-1/2 h-[283px] px-[50px] bg-[#028BFF] leading-7 flex items-center text-white">
          2021年10月，由民建湖南省委会发起成立的中华思源工程扶贫基金会潇湘公益基金在长沙举办成立仪式。联合智为现场捐赠了2250万元物资，将用于开展社会服务、定点帮扶和公益慈善等工作。
          未来，联合智为也将继续践行公益事业，担当起更多的社会责任。
        </div>
        <div class="md:w-1/2">
          <img class="w-full h-[283px] object-cover block" src="../assets/images/about/public_1.jpg" />
        </div>
        <div class="md:w-1/2">
          <img class="w-full h-[283px] object-cover block" style="object-postion: 100% -35px" src="../assets/images/about/public_2.jpg" />
        </div>
        <div class="md:w-1/2">
          <img class="w-full h-[283px] object-cover block" src="../assets/images/about/public_3.jpg" />
        </div>
      </div>
    </div>

    <div id="contact" class="contact-box py-20 bg-[#F8F9FA]">
      <card-title less-title="contact us" title="联系我们"></card-title>
      <div class="contact-con module-con">
        <div id="companyMap" class="contact-map my-10 h-[500px]"></div>
        <p class="text-[#222]">湖南联合智为信息科技有限公司</p>
        <p class="flex items-center mt-5 text-sm text-[#555]">
          <img />
          <span>地址：湖南省长沙市高新区军民融合科技创新产业园1栋B座1607、1610</span>
        </p>
        <p class="flex items-center text-sm text-[#555] mt-3">
          <img />
          <a href="tel:18573135331">业务洽谈： 王女士 18573135331</a>
        </p>
        <p class="flex items-center text-sm text-[#555] mt-3">
          <img />
          <a href="tel:18670725213">商务合作： 戴经理 18670725213</a>
           <span class="colortran">12</span><a href="tel:18570855995">夏经理 18570855995</a>
        </p>
        <p class="flex items-center text-sm text-[#555] mt-3">
          <img />
          <a href="tel:15367825057">技术支持： 小智 15367825057</a>
        </p>
      </div>
    </div>
  </div>
</template>

<script>
import CardTitle from '../components/CardTitle.vue'
import CuSwiper from '../components/CuSwiper.vue'
import CuSwiperItem from '../components/CuSwiperItem.vue'
export default {
  components: {
    CardTitle,
    CuSwiper,
    CuSwiperItem,
  },
  data() {
    return {
      certList: [],
      swiperOption: {},
      contributeOption: {},
      meetingOption: {
        pagination: {
          el: '.swiper-pagination',
          clickable: true,
          bulletClass: 'meeting-bullet',
          bulletActiveClass: 'meeting-bullet-active',
        },
      },
    }
  },
  head: {
    title: '关于我们/公司简介-联合智为',
    meta: [
      {
        hid: 'index-desc',
        name: 'description',
        content:
          '联合智为是集平台、软件、硬件于一体的智慧住建综合解决方案提供商。基于大数据、物联网、云计算等技术和智能设备，为住建部门、开发商、建筑商提供一站式智慧工地监管解决方案，助力智慧建造、数字建造、安全建造、绿色建造。',
      },
    ]
  },
  mounted() {
    const certList = []
    for (let i = 1; i <= 16; i++) {
      const name = i < 10 ? '0' + i : i
      certList.push(require(`../assets/images/about/cert_${name}.png`))
    }
    this.certList = certList
    this.setMap()
  },
  methods: {
    setMap() {
      const BMap = window.BMap
      const map = new BMap.Map('companyMap')
      const point = new BMap.Point(112.888585, 28.23787)
      const marker = new BMap.Marker(point)
      const icon = marker.getIcon()
      const infoWindow = this.setInfoBox()

      icon.size = { width: 45, height: 45 }
      marker.setAnimation(window.BMAP_ANIMATION_BOUNCE)
      marker.addEventListener('mouseover', (e) => {
        map.openInfoWindow(infoWindow, map.getCenter())
      })
      marker.addEventListener('mouseout', (e) => {
        map.closeInfoWindow(infoWindow)
      })

      map.centerAndZoom(point, 18)
      map.addOverlay(marker)
    },
    setInfoBox() {
      const companyInfo = `
                <div>
                    <p class="text-base mb-3">湖南联合智为信息科技有限公司</p>
                    <p class="text-indigo-500 text-sm">服务电话：<a href="tel:15367825057"></a>15367825057</p>
                    <p class="text-indigo-500 text-sm">技术支持：<a href="tel:18570636213"></a>18570636213</p>
                </div>
            `
      return new window.BMap.InfoWindow(companyInfo)
    },
  },
}
</script>

<style scoped>
.banner {
  height: 514px;
  background-image: url('../assets/images/about/about_banner.png');
  background-size: cover;
}

.company-box {
  padding: 90px 0 55px;
}

.company-title-less {
  font-size: 20px;
  font-weight: 500;
  color: #9d9d9d;
}

.waterfall {
  margin: 0 auto;
  column-count: 4;
  column-gap: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.water-item {
  box-sizing: border-box;
  break-inside: avoid;
  margin-bottom: 8px;
}

.item-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: auto;
  box-sizing: border-box;
}

.contribute-box {
  padding: 80px 0;
  text-align: center;
}

.contribute-con {
  text-align: center;
  margin: 0 auto;
}

.contribute-cell {
  height: 60px;
  padding: 0 30px;
  background: rgba(174, 205, 255, 0.1);
  border-left: 4px solid #0966ff;
  color: #0966ff;
}
.colortran{
  color: transparent;
}
</style>
<style>
.meeting-bullet {
  display: inline-block;
  @apply w-[15px] h-1 rounded-none bg-[#DDE4EC] opacity-100;
}

.meeting-bullet + .meeting-bullet {
  margin-left: 12px;
}

.meeting-bullet-active {
  @apply bg-[#0E93FF];
}
</style>
